<template>
	<view class="">
		<image :src="bg_img_url" class="hf_interest" mode="aspectFill"></image>
		<view class="hx_xuanx">
			<u-input placeholder="请输入手机号码" border="bottom" maxlength="11" fontSize='16' :placeholderStyle="placeholder"
				v-model.trim="phone">
				<template slot="suffix">
					<image :src="baseUrl + '/static/image/hflogo.png'" class="hflogo" mode="aspectFill"></image>
				</template>
			</u-input>
			<view class="" v-for="(item,idnex) in hfList">
				<view class="hf_title">
					<text class="c3 f36 mr10">{{item.title_des}} </text>
					<text class="f28 c9">{{item.expected_des}}</text>
				</view>
				<view class="flex_ld_a">
					<view class="flex_line hf_item" v-for="hfitem in item.list" @click="setamount(hfitem)"
						:class="{hf_active:active==hfitem.id}">
						<view class="f40" :class="active==hfitem.id?'c1':'c3d'">
							{{hfitem.amount}}元
						</view>
						<view class="f28" :class="active==hfitem.id?'c1':'c3d'">
							券后价 ￥{{hfitem.more_amount}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="">
				<view class="hf_title">
					<text class="c3 f36 mr10">普通快充 </text>
					<text class="f28 c9">预计5小时内到账</text>
				</view>
				<view class="flex_ld_a">
					<view class="flex_line hf_item" v-for="item in superList"  @click="setamount(item)":class="{hf_active:active==item.id}">
						<view class="f40" :class="active==item.id?'c1':'c3d'">
							{{item.amount}}元
						</view>
						<view class="f28" :class="active==item.id?'c1':'c3d'">
							券后价 ￥{{item.amount}}
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="hf_tips">
			<view class="c3 f32 mt20">温馨提示 </view>
			<view class="f24 c6">
				<rich-text class="h10" :nodes="hint_des"></rich-text>
			</view>
		</view>
		<view class="empty3">

		</view>
		<view class="flex_ld hf_pay">
			<view class="flex_ZC" @click="tophoneOrder">
				<image src="/static/image/hforder.png" mode="aspectFill" class="hf_order"></image>
				<view class="f24 c3d">
					订单
				</view>
			</view>
			<view class="hf_btn" @click="recharge">
				立即充值
			</view>
		</view>
		<u-popup :show="payShow" mode="bottom" bgColor="#F5F5F5" :safeAreaInsetBottom='safeAreaInsetBottom' round='15'
			@close="payShow = false">
			<view class="payment flex_ZC">
				<view class="roll_box">
					<view class="commodity">
						<view class="commodity_top flex_dq">
							<view class="goodsimg flex_c">
								<image :src="selection.thumb" mode="aspectFill"></image>
							</view>
							<view class="goods_r flex_Z">
								<view class=" flex_dq">
									<text class="f36 c4">￥</text>
									<text class="f44 c4 fw6">{{selection.more_amount}}</text>
								</view>
								<view class="mart14">
									<text class="f32 c3 overflow2">话费充值</text>
								</view>
							</view>
						</view>
					</view>
					<view class="coupon flex_Z " v-if="Number(userMoney) >= 0.01">
						<view class="coupon_r flex_ld" @click="changeCoupons">
							<view class="coupon_l flex_dq">
								<image :src="baseUrl1 +'/static/icon/i_dk.png'" mode="aspectFill"></image>
								<text class="f30 c3">使用More券抵扣</text>
							</view>
							<view class="">
								<image v-if="!isMoney" class="checkboxHead" :src="baseUrl1 +'/static/icon/i_wxz.png'"
									mode="aspectFill">
								</image>
								<image v-else class="checkboxHead" :src="baseUrl1 +'/static/icon/i_xz.png'"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="c9 f26">
							可用余额:{{userMoney}}
						</view>
					</view>
					<view class="coupon flex_ld" v-if=" Number(userMoney)<0.01">
						<view class="coupon_l flex_dq">
							<image :src="baseUrl1 +'/static/icon/i_dk.png'" mode="aspectFill"></image>
							<text class="f30 c3">More券余额不足</text>
						</view>
						<view class="coupon_r flex_dq" @click="changeCoupons">
							<text class="f28 c3">{{userMoney}}</text>

						</view>
					</view>
				</view>

				<view class="zhanwei"></view>
				<view class="settlement flex_ld">
					<view class=" flex_dq">
						<text class="f28 c3">合计：</text>
						<text class="f48 c4 fw5">{{totalPrice}}</text>
					</view>
					<text class="submit" @click="isPlaceOrder">提交订单</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	import {
		createPhone,
		phonePay,
		bynSetting
	} from "@/api/local.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				placeholder: 'color: #cccccc;fontSize:48rpx',
				active: 0,
				// 选中的充值项
				selection: {},
				phone: "",
				isMoney: false,
				dikouMoney: '0.000',
				payShow: false,
				safeAreaInsetBottom: false, //底部兼容
				userMoney: "",
				userInfo: {},
				isfrom: "",
				pay_way: "",
				bg_img_url: "",
				hint_des: "",
				hfList: []
			}
		},
		onLoad() {
			this.getEnv()
			this.getuserInfo()
			this.getsetting()
		},
		computed: {
			// 计算总价
			totalPrice() {
				if (this.isMoney) {
					if (Number(this.userInfo.money) - Number(this.selection.amount) >= 0) {
						return 0.01
					} else {
						return (Number(this.selection.amount) - Number(this.userInfo.money)).toFixed(2);
					}
				} else {
					return (Number(this.selection.amount)).toFixed(2);
				}
			},
		},
		methods: {
			getsetting() {
				bynSetting().then(res => {
					console.log(res);
					this.bg_img_url = res.data.bg_img_url
					this.hint_des = res.data.hint_des.replace(/\n/g, '<br>')
					this.hfList = res.data.data
				})
			},
			getEnv() {
				let isfrom;
				// 小程序环境判断
				// H5环境判断
				// #ifdef H5
				const ua = navigator.userAgent.toLowerCase();
				if (ua.match(/Alipay/i)) {
					isfrom = '支付宝浏览器';
					this.pay_way = "alipay"
				} else if (ua.match(/MicroMessenger/i)) {
					isfrom = '微信内置浏览器';
					this.pay_way = "wxpay"
				} else {
					isfrom = '普通浏览器';
					this.pay_way = "alipay"
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.pay_way = "wxpay"
				// #endif
				// #ifdef MP-ALIPAY
				this.pay_way = "alipay"
				// #endif
				this.isfrom = isfrom
				return isfrom;
			},
			setamount(item) {
				console.log(item);
				this.active = item.id
				this.selection = item
			},
			tophoneOrder() {
				uni.navigateTo({
					url: "/pagesMy/groundCat/phoneOrder"
				})
			},
			recharge() {
				if (!this.phone) {
					uni.$u.toast('请输入手机号')
				} else if (!this.selection.amount) {
					uni.$u.toast('请选择充值金额')
				} else {
					this.payShow = true
				}

			},
			getuserInfo() {
				myuser().then(res => {
					console.log('个人信息', res)
					if (res.code == 1) {
						this.userInfo = res.data
						this.userMoney = res.data.money
						this.dikouMoney = res.data.deduction_amount
						if (Number(this.userMoney) == 0) {
							this.isMoney = false
						}
					}
				})
			},
			isPlaceOrder() {
				const data = {
					phone: this.phone,
					is_money: this.isMoney,
					money_id: this.selection.id
					// way:this.selection.type,
					// amount:this.selection.amount
				}
				createPhone(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pagesMy/cloudCat/paymentCenter?type=100' + '&id=' + res.data.order_id +
								'&totalPrice=' + this.totalPrice
						})
						return
						// this.payphone(res.data.order_id)
					}
				})
			},
			// payphone(orderId) {
			// 	const data = {
			// 		order_id: orderId,
			// 		pay_way: this.pay_way
			// 	}
			// 	phonePay(data).then(res => {
			// 		if (res.code == 1) {
			// 			let paydata = {}

			// 			// #ifdef MP-WEIXIN
			// 			console.log(res, 'MP-WEIXIN');
			// 			if (res.data.pay_data) {
			// 				paydata = JSON.parse(res.data.pay_data.pay_info)
			// 			} else {
			// 				paydata = JSON.parse(res.data.pay_info)
			// 			}
			// 			uni.showLoading({
			// 				title: "支付中",
			// 				mask: true
			// 			})
			// 			console.log(paydata);
			// 			uni.requestPayment({
			// 				provider: "wxpay",
			// 				appid: paydata.appId,
			// 				timeStamp: paydata.timeStamp,
			// 				package: paydata.package,
			// 				paySign: paydata.paySign,
			// 				signType: paydata.signType,
			// 				nonceStr: paydata.nonceStr,
			// 				success(res) {
			// 					uni.hideLoading()
			// 					uni.$u.toast('支付成功!')
			// 					setTimeout(() => {
			// 						uni.switchTab({
			// 							url: '/pages/index/mine'
			// 						})
			// 					}, 1200)
			// 				},
			// 				fail(e) {
			// 					uni.hideLoading()
			// 					if (e.errMsg == "requestPayment:fail cancel") {
			// 						uni.$u.toast('支付已取消')
			// 					} else {
			// 						uni.$u.toast('错误：' + e.errMsg)
			// 					}
			// 				}
			// 			})
			// 			// #endif
			// 			// #ifdef H5

			// 			if (this.isfrom == '微信内置浏览器') {
			// 				if (res.data.pay_data) {
			// 					paydata = JSON.parse(res.data.pay_data.pay_info)
			// 				} else {
			// 					paydata = JSON.parse(res.data.pay_info)
			// 				}
			// 				uni.showLoading({
			// 					title: "支付中",
			// 					mask: true
			// 				})
			// 				WeixinJSBridge.invoke('getBrandWCPayRequest', {
			// 						"appId": paydata.appId, //公众号ID，由商户传入     
			// 						"timeStamp": paydata.timeStamp, //时间戳，自1970年以来的秒数     
			// 						"nonceStr": paydata.nonceStr, //随机串     
			// 						"package": paydata.package,
			// 						"signType": paydata.signType, //微信签名方式：     
			// 						"paySign": paydata.paySign //微信签名 
			// 					},
			// 					function(res) {
			// 						uni.hideLoading()
			// 					});
			// 			} else {
			// 				uni.hideLoading()
			// 				console.log(res.data.pay_data);
			// 				if (res.data.pay_data) {
			// 					window.location.href = res.data.pay_data.qr_code
			// 				} else {
			// 					console.log(res.data.qr_code);
			// 					window.location.href = res.data.qr_code
			// 				}
			// 				// window.location.href = res.data.pay_data.qr_code || res.data.data.qr_code
			// 			}
			// 			// #endif
			// 			// #ifdef MP-ALIPAY
			// 			console.log(res, 'MP-ALIPAY');
			// 			paydata = JSON.parse(res.data.pay_data.pay_info)
			// 			my.tradePay({
			// 				// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
			// 				tradeNO: paydata.tradeNO,
			// 				success: res => {
			// 					console.log(res);
			// 					uni.hideLoading()
			// 					if (res.resultCode == '9000') {
			// 						this.checkstatus()
			// 					} else if (res.resultCode == '6001') {
			// 						uni.$u.toast('支付已取消!')
			// 					}
			// 				},
			// 				fail: error => {
			// 					console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
			// 					uni.hideLoading()
			// 					uni.$u.toast(JSON.stringify(error))
			// 				},
			// 			});
			// 			// #endif
			// 		}
			// 	})
			// },
			// 选用抵扣券
			changeCoupons() {
				this.isMoney = !this.isMoney
			}
		}
	}
</script>

<style>
	.hf_interest {
		width: 100%;
		height: 320rpx;
	}

	.hx_xuanx {
		width: 690rpx;
		/* height: 676rpx; */
		background: #fff;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: -110rpx;
		position: relative;
		z-index: 10;
		padding: 15rpx 20rpx 40rpx;
	}

	.hflogo {
		width: 42rpx;
		height: 56rpx;
	}

	/deep/ .u-input {
		height: 100rpx;
	}

	.hf_title {
		margin-top: 40rpx;
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.hf_item {
		width: 200rpx;
		height: 140rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.hf_active {
		border: 2rpx solid #FFC300;
	}

	.hf_tips {
		width: 690rpx;
		background: #fff;
		border-radius: 24rpx;
		margin: 0 auto;
		position: relative;
		padding: 20rpx;
		margin-top: 30rpx;
	}

	.hf_pay {
		width: 100%;
		height: 106rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		padding: 0 30rpx 0 64rpx;
	}

	.hf_order {
		width: 36rpx;
		height: 40rpx;
	}

	.hf_btn {
		width: 556rpx;
		height: 80rpx;
		background: linear-gradient(-270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 142rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 80rpx;
		text-align: center;
	}

	.payment {
		position: relative;
		width: 750rpx;
		background: #F5F5F5;
		max-height: 1400rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}

	.roll_box {
		overflow-y: auto;
	}

	.commodity {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 24rpx 0;
		padding: 24rpx;
	}

	.goodsimg>image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
	}

	.goods_r {
		margin-left: 30rpx;
	}

	.mart14 {
		margin-top: 14rpx;
	}


	.coupon {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx 24rpx;
	}

	.coupon_l>image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.zhanwei {
		width: 100%;
		height: 190rpx;
	}

	.settlement {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	}

	.submit {
		width: 242rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		font-size: 32rpx;
		background: #FFC300;
		text-align: center;
		border-radius: 40rpx;
	}

	.h10 {
		line-height: 40rpx;
	}
</style>